<!--平台信息发布-->
<template>
  <div class="app-container">
    <el-form ref="form" :model="form" :rules="rules">
      <el-form-item label="标题(中文)" prop="chineseTitle">
        <el-input class="modal-input" v-model="form.chineseTitle" placeholder="请输入标题"/>
      </el-form-item>
      <el-form-item label="标题(英文)" prop="englishTitle">
        <el-input class="modal-input" v-model="form.englishTitle" placeholder="请输入标题"/>
      </el-form-item>
      <el-form-item label="类型" prop="typeInfo">
        <el-select v-model="form.typeInfo" placeholder="请选择类型" @change="typeChange">
          <el-option
            v-for="item in typeInfoOptions"
            :key="item.value"
            :label="item.label"
            :value="item.value"
          >
          </el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="内容(中文)" prop="chineseContent">
        <editor v-model="form.chineseContent" placeholder="请输入消息内容" :min-height="200"/>
      </el-form-item>
      <el-form-item label="内容(英文)" prop="englishContent">
        <editor v-model="form.englishContent" placeholder="请输入消息内容" :min-height="200"/>
      </el-form-item>
      <!-- <el-form-item label="跳转链接" prop="url">
        <el-input class="modal-input" v-model="form.url" placeholder="请输入跳转链接"/>
      </el-form-item> -->
      <el-form-item label="推送目标" v-show="form.typeInfo == 1">
    <!--<el-checkbox-group v-model="form.target">
          <el-checkbox label="4">全员用户</el-checkbox>
          <el-checkbox label="5">等级</el-checkbox>
          <el-checkbox label="6">指定用户</el-checkbox>
        </el-checkbox-group>-->
        <el-radio-group v-model="form.target" @input="groupInput">
          <el-radio label="4">全员用户</el-radio>
          <el-radio label="5">等级</el-radio>
          <el-radio label="6">指定用户</el-radio>
        </el-radio-group>
      </el-form-item>
    <!--    等级显示-->
      <el-form-item v-if="groupIndex == 5" label="用户等级">
        <el-select v-model="form.pushTarget" placeholder="请选择等级">
          <el-option
            v-for="item in userList"
            :key="item.level"
            :label="item.name"
            :value="item.level"
          >
          </el-option>
        </el-select>
      </el-form-item>

<!--      指定用户显示-->
      <el-form-item v-if="groupIndex == 6" label="指定用户">
        <el-select v-model="form.pushTarget" placeholder="请选择指定用户" @input="test"
                   v-loadmore="loadmore">
          <el-option
            v-for="(item,index) in diyUserList"
            :key="index"
            :label="item.userName"
            :value="item.id"
          >
          </el-option>
        </el-select>
      </el-form-item>

      <el-form-item>
        <el-button type="primary" @click="onSubmit" v-loading.fullscreen.lock="loading">点击发布</el-button>
      </el-form-item>
    </el-form>
  </div>
</template>
<script>

import {
  addMessage,
  messageDetails, platformInfoUpload
} from '@/api/content/postMessage'
import { foundationpage, userLevelList } from '@/api/setting/gradeRebate'

export default {
  name: 'Package',
  components: {},
  data() {
    return {
      targetList:[
        { id: 1, label: '用户', value: 'option1' },
        { id: 2, label: '店铺', value: 'option1' },
        { id: 3, label: '主播', value: 'option1' },
      ],
      id:this.$yun.v(this.$route.query, 'id'),
      loading: false,
      typeInfoOptions: [
        { value: 0, label: '平台公告' }, { value: 1, label: '推送消息' }],
      form: {
        chineseTitle: null,
        englishTitle: null,
        typeInfo: 0,
        chineseContent: null,
        englishContent: null,
        url: null,
        target: '',
        pushTarget:null,
      },
      rules: {
        chineseTitle: [
          { required: true, message: '标题不能为空', trigger: 'blur' }
        ],
        englishTitle: [
          { required: true, message: '标题不能为空', trigger: 'blur' }
        ],
        typeInfo: [
          { required: true, message: '发布类型不能为空', trigger: 'blur' }
        ],
        chineseContent: [
          { required: true, message: '内容不能为空', trigger: ['blur','change'] }
        ],
        englishContent: [
          { required: true, message: '内容不能为空', trigger: ['blur','change'] }
        ],
        url: [
          { required: true, message: '跳转链接不能为空', trigger: 'blur' }
        ]
      },
      groupIndex:null,
      userList:[],
      diyUserList:[],
      total1:0,
      // 查询参数
      queryParams: {
        pageNum: 1,
        pageSize: 10,
      },
      finished:true,
    }

  },
  created() {
    if(this.id){
      this.getDetails();
    }
    this.queryUserLevel()
    // this.queryFoundationpage()
  },
  methods: {
    test(e){
      console.log(this.form.pushTarget)
    },
    queryUserLevel(){
      userLevelList().then(res => {
        this.userList = res.data
      })
    },
    queryFoundationpage(){
      foundationpage(this.queryParams).then(res => {
        this.diyUserList.push(...res.data.records)
        this.total1 = res.data.total1
      })
    },

    groupInput(e){
      this.groupIndex = e
      this.form.pushTarget = null;
      this.queryParams.pageNum = 1;
      if(this.groupIndex == 6){
        this.queryFoundationpage();
      }
    },
    // 发布类型改变
    typeChange(value){
      if(value == '0'){
        this.form.target = '';
      }
    },
    onSubmit() {
      this.$refs['form'].validate(valid => {
        if (valid) {
          this.loading = true;
          let setDate = {};
          if(this.form.typeInfo == '1'){
            let newArr
            if(this.form.target !== null && this.form.target !== undefined && this.form.target !== ""){
              newArr = this.form.target
            }
            console.log(newArr);
             if(!newArr) {
              // this.$modal.msgError('推送对应目标不能为空');
              this.loading = false
              return
            }
            if(this.form.target !== null) var target = this.form.target.toString();
            setDate = { ...this.form,target:target};
          }else {
            this.form.target = ''
            // if(this.form.target !== '') if(this.form.target !== null) this.form.target = this.form.target.join("")
            setDate = this.form;
          }
          console.log(setDate);
          if(this.form.target == "5"){
            if(!this.form.pushTarget&&this.form.pushTarget!==0){
               this.$modal.msgError('用户等级不能为空');
               this.loading = false;
               return
            }
          }
          if(this.form.target == "6"){
             if(!this.form.pushTarget){
               this.$modal.msgError('用户不能为空');
               this.loading = false;
               return
            }

          }
          if(!this.id){
            addMessage({ ...setDate,type: this.$yun.v(this.$route.query, 'type')}).then(response => {
              this.loading = false;
              this.$modal.msgSuccess('发布成功');
              // 关闭当前tabs
              this.$store.dispatch('tagsView/delView', this.$route)
              // 跳转路由
              this.$router.replace({ path: '/content/messageList' })
            }).catch(()=>{
              this.loading = false;
            })
          }else{
            platformInfoUpload({ ...setDate,type: this.$yun.v(this.$route.query, 'type')}).then(response => {
              this.loading = false;
              this.$modal.msgSuccess('发布成功');
              // 关闭当前tabs
              this.$store.dispatch('tagsView/delView', this.$route)
              // 跳转路由
              this.$router.replace({ path: '/content/messageList' })
            }).catch(()=>{
              this.loading = false;

            })
          }


        }
      })
    },
    getDetails() {
      messageDetails(this.id).then(response => {
        this.form = response.data;
        this.form.target = this.form.target.split(',')
      })
    },
    // 触底分页
    loadmore(){
      if(this.total1 != this.diyUserList.length){
        this.queryParams.pageNum++;
        this.queryFoundationpage()
      }
    },
  }
}
</script>
